<template>
  <div class="handle">
    <div class="title">
      <van-icon name="arrow-left" color="#ffffff" @click="skip_shop" />
      <van-search placeholder="请输入搜索关键词" />
      <van-icon
        name="shopping-cart-o"
        color="#ffffff"
        @click="skip_shoppingCart"
      />
    </div>
    <van-swipe :autoplay="5000">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

    <!-- 热销单品 -->
    <van-row>
      <van-col span="24" color="rgba(89, 89, 89, 1)">所 有 分 类</van-col>
    </van-row>

    <van-grid>
      <van-row
        v-for="(item, index) in list"
        :key="index"
        @click="toCategories(item)"
      >
        <!-- <van-image :src="item.showImg" round /> -->
        <div>
          <img :src="item.showImg" alt="">
        </div>
        <van-col span="24" color="rgba(89, 89, 89, 1)">{{ item.name }}</van-col>
      </van-row>
    </van-grid>

    <van-row class="live_discounts">
      <van-col span="24" color="rgba(89, 89, 89, 1)">品质生活</van-col>
      <van-image src="http://127.0.0.1:3000/newProduction/7.png" />
    </van-row>

    <van-row class="live_discounts">
      <van-col span="24" color="rgba(89, 89, 89, 1)">品牌特卖</van-col>
      <van-image src="http://127.0.0.1:3000/newProduction/8.png" />
    </van-row>
  </div>
</template>

<script>
import {getProduct} from "../../../api/index"

export default {
  data() {
    return {
      list: [],
      images: [
        "https://img1.baidu.com/it/u=2840423828,43832361&fm=26&fmt=auto",
        "https://img1.baidu.com/it/u=1868569097,1127525262&fm=26&fmt=auto",
        "https://img2.baidu.com/it/u=1786958037,1687863260&fm=26&fmt=auto",
      ],
    };
  },
  created() {
    this.init();
  },
  mounted() {
    // getProduct
  },
  methods: {
    async init() {
      let { data, meta: { status, msg },
      } = await getProduct();
      // console.log(data);
      this.list = data;
      console.log(data);
    },
    skip_shop() {
      this.$router.push("/shop");
    },
    skip_shoppingCart() {
      this.$router.push("/shopping_cart");
    },
    toCategories(val) {
      let path = "";
      // console.log(val.id);
      switch (val.id) {
        case 1:
          // 由于此时只写了卧室对应的下行页面，处理只做一个跳转
          path = "/bedroom";
          this.$router.push(path);
          break;

        default:
          break;
      }
      
    },
  },
};
</script>

<style lang="less" scoped>
.handle {
  width: 100%;
  margin-bottom: 15px;
  .title {
    width: auto;
    background-color: #ff5555;
    padding: 0;
    padding-top: 16px;
    display: flex;
    .van-search {
      width: 600px;
      height: 54px;
      border-radius: 10px;
      margin-bottom: 10px;
      padding: 0;
      .van-cell {
        padding: 0;
      }
    }
    .van-icon {
      padding: 10px 20px 0 16px;
      font-size: 42px;
    }
  }

  .van-swipe {
    height: 277px;
    img {
      width: 750px;
      height: 277px;
    }
  }

  // 推荐
  #photo1 {
    width: 100%;
    height: 278px;
  }
  // 所有分类
  .van-row {
    text-align: center;
    margin: 20px 0;
    .van-col {
      font-size: 26px;
    }
  }
  .van-grid {
    padding: 10px 60px 0 60px;
    margin: 0 20px;
    box-shadow: rgba(153, 153, 153, 0.5) 0px 0px 14px 0px;
    border-radius: 12px;
    .van-row {
      width: 100px;
      margin: 0 0 0 144px;
      div {
        // width: 100px;
        // height: 100px;
        // border-radius: 50%;
        img {
          width: 100px;
          height: 100px;
        }
      }
    }
    .van-col {
      margin-top: 14px;
      margin-bottom: 20px;
    }
    .van-row:nth-child(1),
    .van-row:nth-child(4) {
      margin-left: 0;
    }
  }

  .live_discounts {
    margin: 0 20px;
    .van-col {
      font-size: 26px;
      text-align: right;
      padding: 20px 0;
    }
    .van-image {
      height: 218px;
      width: 100%;
    }
  }
}
</style>